<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>表单验证</h1>
    <hr>

    <form name="regForm" action="1.php" method="post" onsubmit="return checkForm()">
        <table>
            <tr>
                <td>邮箱:</td>
                <td><input type="text" name="email"></td>
            </tr>
            <tr>
                <td>用户名:</td>
                <td><input type="text" name="user"></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" name="pass"></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" name="repass"></td>
            </tr>
            <tr>
                <td></td>
                <td><button>注册</button></td>
            </tr>
        </table>

    </form>

    <script>

        function checkForm() {
            // 邮箱验证
            var email = document.regForm.email.value;
            // console.log(email);
            //        123@qq.com
            //       sf25@163.com.cn
            // 1235-22345@qq.vip.com.cn
            if (email.search(/^[\w-]+@[\w-]+(\.\w+){1,3}$/) === -1) {
                alert('邮箱格式不正确!!');
                return false;
            }

            // 用户名验证  6-12位  数字字母下划线
            var user = document.regForm.user.value;
            if (user.match(/^\w{6,12}$/) === null) {
                alert('用户名不合法,6-12位  数字字母下划线');
                return false;
            }

            // 密码验证   6-18位
            var pass = document.regForm.pass.value;
            if (pass.length< 6 || pass.length > 18) {
                alert('密码长度 不合法 6-18位');
                return false;
            }

            // 确认密码
            var repass = document.regForm.repass.value;
            if (repass !== pass) {
                alert('两次密码不一致!!');
                return false;
            }


            return true;
        }
    
    </script>
</body>
</html>